    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

        <script>
            //什么时候使用箭头函数
            /* setTimeout(function(){
                //打印的对象是window对象
                console.log(this);
            },1000)

            setTimeout(()=>{
                //打印的对象是window对象
                console.log(this);
            },1000)
            

 */
            const obj = {
                aaa(){
                    //这里打印的是window对象 //因为这里面有一个call回调函数，把window通过第一个参数传回来
                    setTimeout(function(){
                        console.log(this);
                    })


                    //这里打印的是obj对象
                    setTimeout(()=>{
                        console.log(this);
                    })

                    //这个this就是obj  就是箭头函数找到的 外层作用域中的this对象
                    console.log(this)//obj
                }
            }


            //为什么在obj对象里打印的是不一样的呢
          //  问题：箭头函数中的this是如何查找的？
          //答案：向外层作用域中，一层层查找this，直到有this的定义



          //练习
          //记住箭头函数才往外找，function(){}就是回调函数传过来的第一个window参数
          const obj1 = {
            aaa(){
                setTimeout(function(){
                    setTimeout(function(){
                      console.log(this)//window  
                    })

                    setTimeout(()=>{
                      console.log(this)  //window
                    })
                })

                setTimeout(()=>{
                    setTimeout(function(){
                        console.log(this)//window
                    })

                    setTimeout(()=>{
                        console.log(this)//obj
                    })
                })

            }

          }


        </script>
        
    </body>
    </html>